<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>yav - Javascript form validation tool</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META name="Author" content="f.crivellaro" />
<META name="Keywords" content="javascript, form, forms, validation, validator, form validation, form validator, javascript validation, web design" />
<META name="Description" content="yav is a SIMPLE, POWERFUL and CUSTOMIZABLE javascript-based form validation tool" />
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
<LINK href="../styles/yav-style.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<TABLE id=layout style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" cellSpacing=0 cellPadding=0 width="100%">
  <TBODY>

<!-- HEADER -->
  <TR>
    <TD 
    style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px" 
    colSpan=3>
      <TABLE id=banner 
      style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px" 
      width="100%">
        <TBODY>
        <TR>
          <TD vAlign=center align=left width=90><img src="../img/yav-logo.gif" width="80" height="50" alt="Yav Logo" border="0"></TD>
          <TD><FONT size=2><B>Javascript form validation tool</B></FONT></TD>
          <TD 
          style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px" 
          vAlign=center align=right>
          <a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=133036&amp;type=2" width="125" height="37" border="0" alt="SourceForge.net Logo" /></a>
        </TD></TR></TBODY></TABLE></TD></TR>
  <TR>

<!-- TOP BAR -->
    <TD id=bar colSpan=3>
      <TABLE 
      style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px" 
      width="100%">
        <TBODY>
        <TR>
          <TD align=left>
          <a href="../en/index.html"><img src="../img/flag.en.png" width="20" height="14" border="0" alt="english" /></a>
          <a href="../it/index.html"><img src="../img/flag.it.png" width="20" height="14" border="0" alt="italiano" /></a>
          &nbsp;&nbsp;<A href="index.html">Home</A> </TD>
          <TD align=right><SPAN id=Content> 
            <A href="download.html">Download</A></SPAN> | <A href="mailto:f.crivellaro@gmail.com">Contact</A> 
        </TD></TR></TBODY></TABLE></TD></TR>
  <TR>

<!-- LEFT COLUMN -->
    <TD id=leftColumn style="PADDING-TOP: 0px" vAlign=top><SPAN id=Content>
      <br>
      <H3 class=heading3><A>Documentation</A></H3>
      <SPAN class=paragraph><BR>
          <A title="Getting started" href="gettingstarted.html">Getting started</A><BR><BR>
          <A title="Validation rules" href="validationrules.html">Validation rules</A><BR><BR>
          <A title="Learn by example" href="learnbyexample.html">Learn by example</A><BR></SPAN></SPAN> 
        <BR><BR>
        <script type="text/javascript"><!--
        google_ad_client = "pub-8127307659200148";
        google_ad_width = 120;
        google_ad_height = 240;
        google_ad_format = "120x240_as";
        google_ad_type = "text";
        google_ad_channel ="";
        google_color_border = "CCCCCC";
        google_color_bg = "FFFFFF";
        google_color_link = "000000";
        google_color_url = "666666";
        google_color_text = "333333";
        //--></script>
        <script type="text/javascript"
          src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script><BR><BR>
        <a href="http://pajhome.org.uk"><img src="../img/Paj_s_Home.gif" width="80" height="23" border="0" alt="Paj_s Home" /></a><br><br>
    </TD>

<!-- RIGHT COLUMN -->
    <TD id=rightColumn vAlign=top>
      <DIV>
      <DIV id=Content>

      <H1 class=heading1>Getting started</H1>
      <P class=paragraph><B>Yav</B> setup is fast and easy. Here are the steps:</P>

      <P class=paragraph><B>1.</B> Set the configuration values in <EM>yav-config.js</EM> file (optional);</P>
      <P class=paragraph><B>2.</B> Include javascript files into your page:
<PRE><CODE>&lt;HEAD&gt;
    &lt;SCRIPT src="yourPath/yav.js"&gt;&lt;/SCRIPT&gt;
    &lt;SCRIPT src="yourPath/yav-config.js"&gt;&lt;/SCRIPT&gt;
&lt;/HEAD&gt;</CODE></PRE>
      </P>
      <P class=paragraph><B>3.</B> Add validation rules for each field you want validated.<BR>
      You simply have to create an array with your rules, something like this:
<PRE><CODE>&lt;SCRIPT&gt;
    var rules=new Array();
    rules[0]='username|required';
    rules[1]='password|minlength|8';
    ... and so forth ...
&lt;/SCRIPT&gt;</CODE></PRE>
      </P>
      <P class=paragraph><B>4.</B> Add <EM>performCheck(formName, rules, alertType)</EM> function call to your form.<BR>
          This function returns true if validation succeeds, false otherwise. You can use it like you prefer, for example:
          <PRE><CODE>&lt;form onsubmit="return performCheck('formName', rules, 'classic');"&gt;</CODE></PRE>
          It accepts these parameters:
          <ul>
          <li><EM>formName: </EM>the form name you have to validate;</li>
          <li><EM>rules: </EM>the array of rules you have to validate;</li>
          <li><EM>alertType: </EM>the type of error notification.</li>
          </ul>
          <EM>alertType</EM> accepts following values:
          <ul>
          <li><EM>classic: </EM> shows the error messages in a javascript alert;</li>
          <li><EM>innerHtml: </EM> shows the error messages into the page;</li>
          <li><EM>jsVar: </EM> set the <EM>jsErrors</EM> variable with the array of error messages (undefined if validation succeeds).</li>
          </ul>
          For <EM>innerHtml</EM> and <EM>jsVar</EM> types you have to create a DIV element into your page with id equals to the value of <EM>errorsdiv</EM> variable in <EM>yav-config.js</EM> file,
          something like this: <PRE><CODE>&lt;DIV id=errorsDiv&gt;&lt;/DIV&gt;</CODE></PRE><BR>
          
      </P>

      </P></DIV></DIV>&nbsp;
 
      
      </TD>
    <TD></TD></TR>

<!-- FOOTER -->
  <TR>
    <TD id=footer colSpan=3>
      <TABLE width="100%">
        <TBODY>
        <TR>
          <TD vAlign=top align=right>
            Copyright 2005. All rights reserved.</TD></TR></TBODY>
      </TABLE>
  </TD></TR></TABLE>
</TR></TBODY></TABLE></BODY></HTML>